<template>
    <view class="page column">
        <hj-navbar title="优惠券" />
        <view class="main flex w100 flex-auto over-hide">
            <view class="bg big">
                <hj-image mode="aspectFill" src="home-bg.jpg" width="100%" height="100%" />
            </view>
            <view class="content column flex-auto">
                <view class="text-center t-w FZGongYeHei line-height1 pt-40 pb-30">
                    <view class="title pl-24">感谢您~！</view>
                    <view class="ft-50 subTitle mt-20">优惠券奉上</view>
                </view>
                <view class="flex-auto content-main column w100 over-hide">
                    <view class="flex-auto column content-main-in pb-50 br-30 w100 over-hide pt-10">
                        <view class="flex-auto column over-auto-y coupon w100 t-3">
                            <view v-for="item in list" :key="item.id">
                                <ColumnItem :data="item" @handleUse="handleUse" />
                            </view>
                            <view class="pb-20"></view>
                        </view>
                        <view class="center w100 pt-20 bottom">
                            <view class="submit-but ft-30 center line-height1" @click="toList">
                                <view>进一步了解一千米培训最新消息</view>
                                <view class="flash-across"></view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 安全底部 -->
                <hj-safe-footer />
            </view>
        </view>
        <UsePopup :show="isPopupVisible" :qrcode="qrcode" @close="close" />
    </view>
</template>

<script setup>
/**
 * @description 优惠券列表页面，用户完善信息并回答所有问题后，系统会自动发放优惠券，用户可在此页面使用优惠券。
 * @author yinzhi
 * @date 2025-03-12
 */
import { onLoad } from '@dcloudio/uni-app'
import { ref, defineComponent } from 'vue'
import { getCouponListApi } from '@/libs/api/marketingApi.js'
import UsePopup from './components/UsePopup.vue'
import ColumnItem from './components/ColumnItem.vue'
// 引入组件
defineComponent({
    components: {
        UsePopup,
        ColumnItem
    }
})

// 写死的问卷数据，后续需要从后端获取后即可删除
import data from './data.json'
const dataJson = data.data

// 优惠券列表
const list = ref([])

// 获取优惠券列表
const getList = async () => {
    try {
        list.value = dataJson
        // const { data } = await getCouponListApi()
    } catch (error) {
        logger.error({ '[getList]-获取优惠券失败：': error })
    }
}

// 是否显示二维码弹窗
const isPopupVisible = ref(false)
// 使用弹窗的优惠券二维码
const qrcode = ref(
    ''
)

// 立即使用 记得切换每次的二维码
const handleUse = data => {
    isPopupVisible.value = true
}

// 关闭弹窗
const close = () => {
    isPopupVisible.value = false
}

// 跳转新闻详情
const toList = () => {
    uni.navigateTo({
        url: '/pages/message/message-list/index'
    })
}

onLoad(() => {
    getList()
})
</script>

<style scoped lang="scss">
.coupon {
    padding: 14rpx 24rpx 0;
}
.bottom {
    position: relative;
}
.bottom::before {
    content: '';
    width: 100%;
    height: 40rpx;
    position: absolute;
    top: -40rpx;
    left: 0;
    z-index: 16;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
.submit-but {
    color: #37b64a;
    height: 94rpx;
    padding: 0 40rpx;
    border: 6rpx solid #37b64a;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;
    border-radius: 46rpx;
    position: relative;
    overflow: hidden;
}
.flash-across {
    position: absolute;
    animation: changeImg 2s ease 0s;
    top: 0;
    width: 30%;
    height: 100%;
    content: '';
    background: linear-gradient(
        to right,
        rgba(55, 182, 74, 0) 0,
        rgba(55, 182, 74, 0.15) 50%,
        rgba(55, 182, 74, 0) 100%
    );
    transform: skewX(-45deg);
    animation-iteration-count: infinite;
}
@keyframes changeImg {
    from {
        left: -100%;
    }
    100% {
        left: 150%;
    }
}
.title {
    font-size: 68rpx;
}
.subTitle {
    letter-spacing: 24rpx;
}
.main {
    position: relative;
    .content {
        position: relative;
        z-index: 10;
        &-main {
            padding: 0 30rpx 40rpx;
            &-in {
                background: $uni-bg-color;
                box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
            }
        }
    }
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0.6;
    }
}
</style>
